<!--
 * @Author: 码上talk|RC
 * @Date: 2021-08-20 17:09:18
 * @LastEditTime: 2021-10-13 17:39:21
 * @LastEditors: 码上talk|RC
 * @Description: 
 * @FilePath: /ma-portal/subpackage/member/pages/account/password/index.vue
 * @微信:  13680065830
 * @邮箱:  3189482282@qq.com
 * @oops: Just do what I think it is right
-->
<template>
  <div class="password">
    <view class="form">
      <view class="f-item">
        <view class="label">旧密码</view>
        <a-input placeholder="请输入旧密码" clearable trim v-model="form.oldPasswd"></a-input>
      </view>
      <view class="f-item">
        <view class="label">新密码</view>
        <a-input placeholder="请输入6~16位数字或字母" clearable trim v-model="form.password"></a-input>
      </view>
    </view>
    <view class="change-btn" :class=" isConfirm ? 'active' :'' " @tap="handleChange">确定修改</view>
  </div>
</template>

<script>
import {
  mapActions
} from 'vuex';
import {
  model
} from '@/model';
const {
  Member
} = model.collection;
export default {
  name: '',
  components: {},
  data () {
    return {
      form: {
        oldPasswd: '',
        password: ''
      }
    }
  },
  computed: {
    isConfirm () {
      if (this.form.oldPasswd && this.form.password) {
        return true
      }
      return false
    }
  },
  methods: {
    ...mapActions('user', ['logout']),
    handleChange () {
      let len = this.form.password.length
      if (!this.form.oldPasswd) return this.toast('请输入旧密码')
      if (!this.form.password) return this.toast('请输入新密码')
      if (len < 6 || len > 16) return this.toast('请输入6~16位数字或字母')
      if (this.form.password === this.form.oldPasswd) return this.toast('旧密码与新密码重复了，请重新设置新密码')
      Member.sendApi('updateSingleField', {
        params: {
          type: 2
        },
        data: {
          value: this.form.password,
          oldPasswd: this.form.oldPasswd
        }
      }).then((res) => {
        if (res.status) {
          this.toast('密码修改成功', 2000, 'success')
          setTimeout(() => {
            this.logout().then(() => {
              this.red('/pages/login/index')
            });
            this.red('/pages/login/index')
          }, 2000);
        } else {
          this.toast(res.message || '修改失败，请重新修改')
        }
      })
    }
  }
}
</script>
<style lang="less">
.password {
  width: 100vw;
  display: flex;
  justify-content: center;

  .form {
    width: 680rpx;
    padding: 0 20rpx;

    .f-item {
      width: 680rpx;
      height: 90rpx;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      border-bottom: 1rpx solid #ccc;

      /deep/.axq-input__inner {
        text-align: right;
      }

      .label {
        width: 120rpx;
        height: 90rpx;
        line-height: 90rpx;
        font-size: 32rpx;
      }
    }
  }

  .change-btn {
    position: fixed;
    bottom: 60rpx;
    width: 680rpx;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    font-size: 32rpx;
    color: #fff;
    border-radius: 10rpx;
    background-color: #e96fba;
  }

  .active {
    background-color: #dc187f;
  }
}
</style>